<template>
  <v-container>
    <h2 class="titlename">Connect Locally or Online</h2>
    <v-layout text-sm-center wrap row>
      <v-flex xs12 sm6 v-for="(item,index) in part1" :key="index">
        <div class="TextColumn" id="Local">
          <header>
            <img :src="item.logo">
            <h2 class="ExtraSmall">{{item.title}}</h2>
          </header>
          <ul>
            <li v-for="(it,i) in item.list" :key="i">
              <h4 class="ExtraSmall">{{it.subTitle}}</h4>
              <span class="Description">{{it.desc}}</span>
              <p>{{it.content}}</p>
            </li>
          </ul>
        </div>
      </v-flex>
    </v-layout>
    <v-layout
      text-sm-center
      wrap
      row
      class="line"
      v-for="(item,index) in part2"
      :key="index"
      :reverse="index%2===1"
    >
      <v-flex xs12 sm6>
        <div class="Column">
          <div class="VideoWrapper Static">
            <div class="VideoFrame Border Static">
              <img :src="item.img">
              <div class="Play">
                <span class="Fontello-play Icon"></span>
              </div>
            </div>
          </div>
        </div>
      </v-flex>

      <v-flex mb-4 xs12 sm6>
        <div class="Column">
          <h3 class="Small">{{item.title}}</h3>
          <ul>
            <li v-for="(it,i) in item.list" :key="i">
              <h4 class="ExtraSmall">{{it.subTitle}}</h4>
              <p>
                {{
                it.content
                }}
              </p>
            </li>
          </ul>
        </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    part1: [
      {
        logo: require("../assets/map.png"),
        title: "Benefits of Local Lessons",
        list: [
          {
            subTitle: "Convenience",
            desc: "(In-Home)",
            content:
              "Manage your time more effectively by cutting out the commute."
          },
          {
            subTitle: "Familiar Environment for Kids",
            desc: "(In-Home)",
            content:
              "Young kids may be a bit nervous in a new setting. Taking lessons at home is comfortable and familiar."
          },
          {
            subTitle: "Focus",
            desc: "(Teacher Location)",
            content:
              "It's easy to get distracted at home. Meeting at your teacher's location often cuts back on distractions so you can focus on learning."
          },
          {
            subTitle: "Teaching Tools",
            desc: "(Teacher Location)",
            content:
              "Depending on what you're learning, the teacher's location may have access to better resources that wouldn't be available in your home."
          }
        ]
      },
      {
        logo: require("../assets/computer.png"),
        title: "Benefits of Online Lessons",
        list: [
          {
            subTitle: "Convenience",
            desc: "",
            content:
              "No travel time for you or the teacher. Great for a busy schedule."
          },
          {
            subTitle: "Selection",
            desc: "",
            content:
              "With online lessons, you can connect with any teacher, anywhere in the country."
          },
          {
            subTitle: "Price",
            desc: "",
            content:
              "Online lessons are typically priced lower than local in-person lessons."
          },
          {
            subTitle: "Effective",
            desc: "",
            content:
              "Our online students typically stick with their lessons longer than local students."
          }
        ]
      }
    ],
    part2: [
      {
        img: require("../assets/localLessonsVid.jpg"),
        title: "How Local Lessons Work",
        list: [
          {
            subTitle: "Search &amp; Book Online",
            content:
              "Search for a teacher in your ZIP code and browse profiles until you find the right match."
          },
          {
            subTitle: "Select Location",
            content:
              "You can select a teacher for in-home lessons or travel to their location - typically a studio or library."
          },
          {
            subTitle: "Connect",
            content:
              "You'll have the opportunity to speak with your instructor before your first lesson."
          }
        ]
      },
      {
        img: require("../assets/onlineLessonsVid.jpg"),
        title: "How Online Lessons Work",
        list: [
          {
            subTitle: "Search & Book Online",
            content:
              "You can book, schedule, and pay for lessons through our website, just the same as if you're booking a local lesson."
          },
          {
            subTitle: "Connect",
            content:
              "When it's time for your lesson, simply head to your computer and log into TakeLessons Classroom through your account. You'll be able to see and talk to your teacher online through the camera and microphone."
          }
        ]
      }
    ]
  })
};
</script>

<style>
ul {
  list-style: none outside;
}
ol,
ul {
  list-style: none;
  margin-bottom: 20px;
}
.container {
  max-width: 960px;
}
.titlename {
  margin: 5px 0 50px 0;
  text-align: center;
  font-size: 3em;
  font-family: "Lato", "Open Sans", sans-serif;
  line-height: 1.3;
}

#Local header {
  position: relative;
  /* background: url(../assets/map.png) 20px -7px no-repeat; */
  height: 150px;
}
#Local header img {
  position: absolute;
  left: 30px;
}
h2.ExtraSmall,
h3.Small,
h4,
h5.Large,
h6.ExtraLarge {
  font-size: 1.75em;
}
div.TextColumn h2 {
  display: inline-block;
  margin: 30px 0 20px 0;
  margin-left: 190px;
  text-align: left;
}
div.TextColumn li {
  background: url(../assets/checkmark.jpg) no-repeat;
  padding-top: 5px;
  text-align: left;
}
div.TextColumn li p {
  margin-left: 50px;
  padding-right: 24px;
}
div.TextColumn h4 {
  display: inline-block;
  margin-left: 50px;
  font-size: 1.25em;
}

.Column {
  text-align: left;
}
.Column .VideoWrapper .VideoFrame {
  max-width: 430px;
  max-height: 240px;
  padding-right: 24px;
  margin: 0 auto;
}

.Column .VideoWrapper .VideoFrame img {
  width: 100%;
  height: auto;
}
.Column h3 {
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 1.5em;
}
.Column ul {
  padding: 0;
  padding-left: 24px;
}
.reverse .Column .VideoWrapper .VideoFrame {
  padding-right: 0;
  padding-left: 24px;
}
.reverse .Column h3 {
  padding-left: 0;
  padding-right: 24px;
}
.reverse .Column ul {
  padding-left: 0;
  padding-right: 24px;
}
.Column li {
  margin-bottom: 12px;
}
.Column li h4 {
  color: #555;
  margin-bottom: 8px;
  font-size: 1em;
}
.Column li p {
  color: #555;
}
.line {
  border-top: 1px solid rgb(184, 190, 203);
  margin: 0 24px;
  padding-top: 30px;
}
@media screen and (max-width: 768px) {
  .titlename {
    font-size: 1.5em;
    margin: 0;
  }
  h2.ExtraSmall,
  h3.Small,
  h4,
  h5.Large,
  h6.ExtraLarge {
    font-size: 1.55em;
  }
  div.TextColumn h2 {
    margin: 24px 10px 20px 190px;
  }
  div.TextColumn li span {
    display: block;
    padding-left: 50px;
  }
}
@media screen and (max-width: 600px) {
  .Column .VideoWrapper .VideoFrame {
    padding: 0;
  }
  .reverse .Column .VideoWrapper .VideoFrame {
    padding: 0;
  }
  .Column h3 {
    padding: 0;
  }
  .Column ul {
    padding: 0;
  }
  .reverse .Column h3 {
    padding: 0;
  }
  .reverse .Column ul {
    padding: 0;
  }
}
</style>
